<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>商品管理</title>
		<!-- 引入 Bootstrap -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="css/popDrag.css">
		<link rel="stylesheet" type="text/css" href="css/manage.css">
		<script src="js/vue.js"></script>
		<script src="js/PopDrag.js"></script>
		<script src="js/jquery.min.js"></script>
		<script>
		  var t = null;
		  t = setTimeout(time, 1000); //開始运行
		  function time() {
		    clearTimeout(t); //清除定时器
		    dt = new Date();
		    var y = dt.getFullYear();
		    var mt = dt.getMonth() + 1;
		    var day = dt.getDate();
		    var h = dt.getHours(); //获取时
		    var m = dt.getMinutes(); //获取分
		    var s = dt.getSeconds(); //获取秒
		    document.querySelector(".showTime").innerHTML =
		      y +
		      "年" +
		      mt +
		      "月" +
		      day +
		      "日" +
		      h +
		      "时" +
		      m +
		      "分" +
		      s +
		      "秒";
		    t = setTimeout(time, 1000); //设定定时器，循环运行
		  }
		</script>
	</head>

	<style>
		a{
			color:#fff;
		}
		h1{
			text-align: center;
		}
		th{
			text-align: center;
		}
		img{
			height: 6.25rem;
			width: 6.25rem;
		}
		#b1{
			width: 100px;
			height: 25px;
			border-radius: 2px;
			border:1px solid #767676;
			background-color: #efefef;
			visibility: hidden;
		}
		#b1:hover{
			background-color: #e5e5e5;
		}
	</style>

	<body onload="time()">
		<div class="div1">
			<div class="logo">
				<a href="index.html"></a>
			</div>
			<div class="welcome">
				<h>欢迎进行商品管理</h>
			</div>
		</div>
		<div class="bl">
			<div class="showTime"></div>
		</div>
		<div>
			<div class="daohang">
				<li class="d1"><button class="btn1" onclick="window.location.href='/commoditymanage'">商品管理</button></li>
				<li class="d1"><button class="btn1" onclick="window.location.href='/ordermanage'">订单管理</button></li>
			</div>
			<div class="main2">
				<table class="table table-striped table-bordered table-hover text-center">
					<thead>
					<tr style="text-align:center">
						<td>商品图片</td>
						<th>商品编号</th>
						<th>商品名称</th>
						<th>商品单价</th>
						<th>商品库存</th>
						<th>商品介绍</th>
						<th>商品类型</th>
						<th>操作</th>
					</tr>
					</thead>
					<tr th:each="commodities:${commodities}">
						<td><img class="commodityImage" th:src="${commodities.pic}"></td>
						<td th:text="${commodities.commodityno}"></td>
						<td th:text="${commodities.commodityname}"></td>
						<td th:text="${commodities.price}"></td>
						<td th:text="${commodities.stock}"></td>
						<td th:text="${commodities.details}"></td>
						<td th:text="${commodities.type}"></td>
						<td>
							<form th:action="@{'/commoditycorrection/'+${commodities.commodityno}}" method="post">
							<input id="btn1" type="submit" value="更改" class="btn btn-primary" />
							<a class="btn btn-danger" th:href="@{'/commoditydelete/'+${commodities.commodityno}}">删除</a>
							</form>
						</td>
					</tr>
				</table>
				<input id="btn" type="button" value="添加商品" class="btn btn-primary"> 
				<!--遮罩层-->
				<div id="textPopBox" class="popBox" >
				    <h3 class="popBoxHandle">添加商品</h3>  
				    <form action="/commodityadd" method="post">
						<table width="100%" cellpadding="5">  
							<tr>
								<td width="200" >
									&#12288; &#12288; &#12288; &#12288; &#12288; &#12288; 商品图片：
								</td>
								<td>
									<input type="text" id="store" style="visibility: hidden;" name="pic"/>
									<input type="file" id="imgfile" method="post" enctype="multipart/form-data" onclick="OpenButton();">
									<br>
									<button type="button" id="b1" onclick="ToBase64();">提交</button>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">  
									商品编号：      
								</td>  
								
								<td>
									&#12288; <input type="number" placeholder="请输入商品编号" name="commodityno"/>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">  
									商品名称：      
								</td>  
								
								<td>
									&#12288; <input type="text" placeholder="请输入商品名称" name="commodityname"/>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">  
									商品单价：      
								</td>  
								
								<td>
									￥<input type="number" step="0.01"  placeholder="请输入商品价格" name="price"/>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">
									商品库存：
								</td>  
								
								<td>
									&#12288; <input type="number" placeholder="请输入商品库存" name="stock"/>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">
									商品介绍：
								</td>  
								
								<td>
									&#12288; <input type="text" placeholder="请输入商品介绍" name="details"/>
								</td>
							</tr>
							<tr>
								<td width="200" align="right">
									商品类型：
								</td>
								<td>
									&#12288; <input type="number" min="1" max="6" name="type"/>
								</td>
							</tr>
							<tr>  
								<td colspan="2" align="center">  
									<br />  
									<input id='ok' type="submit" class="button green" value="        确    认        " />
									<input id='cancel' type="button" class="button blue" value="        取    消        " />
								</td>  
							</tr>  
						</table>  
					</form>  
				</div>
			</div>  
		
		  
		<script type="text/javascript">
		    //初始化弹出框  
		    var p = new PopUp({  
		        id:"textPopBox"  
		    });  
			
		    //缩放窗口时重新定位弹出框及遮罩层的宽度和高度  
		    EventUtil.addEvent(window,'resize', function() {  
		        p.setPosition();  
		        //如果开启遮罩层，遮罩层元素存在，则重新定位遮罩层  
		        p.enableShadow && p.enableShadow.shadow && p.enableShadow.setProperty(p.enableShadow.shadow);  
		    });  
			
		    EventUtil.addEvent(EventUtil._$('btn'),'click', function() {  
		        p.show({//定义坐标，如果缺省则居中显示  
		        });  
		    });  
			
		    EventUtil.addEvent(EventUtil._$('ok'),'click', function() {  
		        //自定义点击确定按钮之后得操作  
		        var t =$("#backReason").val();  
		        alert("添加成功！");
		        //隐藏弹出框  
		        p.hide();  
		    });  
		    EventUtil.addEvent(EventUtil._$('cancel'),'click', function() {  
		        //自定义点击取消按钮之后得操作,隐藏弹出框  
		        p.hide();  
		    });  
			
		    //当按下ESC键时关闭弹出框  
			EventUtil.addEvent(document,'keyup',function(e) {  
				e = e || window.event;  
				e.keyCode == 27 && p.hide();  
			});  
			EventUtil.addEvent(document,'keyup',function(e) {
				e = e || window.event;  
				e.keyCode == 27 && q.hide();  
			}); 
		    EventUtil.addEvent(window,'load',function() {  
		        if((isIE6 || isOpera) && p.isScroll != null && p.isScroll == 'enabled') {  
		            EventUtil.addEvent(window,'scroll', function() {  
		                setTimeout(function() {  
		                    p.setPosition();  
		                },100);  
		            });  
		        }  
		    });
			EventUtil.addEvent(window,'load',function() {
			    if((isIE6 || isOpera) && q.isScroll != null && q.isScroll == 'enabled') {  
			        EventUtil.addEvent(window,'scroll', function() {  
			            setTimeout(function() {  
			                q.setPosition();  
			            },100);  
			        });  
			    }  
			});  
		    //单选按钮的点击切换事件  
		    function openText(self) {  
		        var value = $(self).val();  
		        if ("true"==value) {  
		            $('#reasonText').css("display", "");  
		        } else {  
		            $('#reasonText').css("display", "none");  
		        }  
		    }

			
			function ToBase64() {
				var img = document.getElementById('imgfile')
				var imgFile = new FileReader();
				imgFile.readAsDataURL(img.files[0]);
				imgFile.onload = function () {
					var imgData = this.result; //base64数据  
					console.log(imgData);
					document.getElementById("store").value = imgData;
				}
			}

			function OpenButton(){
				var obj = document.getElementById("b1");
				obj.style.visibility="visible";
			}
		</script> 
	</body>

</html>